<template>
  <div>
    <user-list ref="userListRef" :disabled="!can('READ')" v-model:tableLoading="tableLoading">
      <template #toolbar-left>
        <el-button @click="openCreate" type="primary" :disabled="!can('EDIT')">创建用户</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template #default="{ row }">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="openEdit(row)"
              :disabled="row.id < 0 || !can('EDIT')" />
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteById(row.id)"
              :disabled="row.id < 0 || !can('EDIT')" />
          </template>
        </el-table-column>
      </template>
    </user-list>
    <user-edit-dialog ref="userEditDialogRef" @close-saved="getData" />
  </div>
</template>
<script setup>
import userList from "@/components/sys/user/list.vue"
import userEditDialog from "@/components/sys/user/editDialog.vue";
import { ElMessageBox } from "element-plus";
import { ref, onMounted, useTemplateRef } from "vue";
import { can } from "@/utils/permission";
import userApi from "@/api/sys/user"
onMounted(async () => {
  await getData()
})
const tableLoading = ref(false)
const userEditDialogRef = useTemplateRef("userEditDialogRef")
const userListRef = useTemplateRef("userListRef")
const openCreate = async () => {
  userEditDialogRef.value.openCreate();
}
const openEdit = async (row) => {
  await userEditDialogRef.value.openEdit(row);
}

const getData = () => {
  userListRef.value.getData();
}
const deleteById = async (id) => {
  await ElMessageBox.confirm("您确定要删除此用户吗？", "删除确认", {
    type: "warning",
  });
  tableLoading.value = true;
  let res = await userApi.deleteById(id);
  if (res.code != 0) {
    tableLoading.value = false;
    return;
  }
  await getData();
}
</script>
